// 示例组件函数（返回HTML字符串）  
function Home() {
    return '<h1>Home Page</h1>';
}

function About() {
    return '<h1>About Page</h1>';
}

function Contact() {
    return '<h1>Contact Page</h1>';
}

function NotFound() {
    return '<h1>404 Not Found</h1>';
}

// 路由配置  
const routes = {
    '/': Home,
    '/about': About,
    '/contact': Contact
};

// 获取内容容器  
const contentContainer = document.getElementById('content');

// 渲染页面  
function renderPage(component) {
    // 清除当前内容  
    contentContainer.innerHTML = '';
    // 插入新内容  
    contentContainer.insertAdjacentHTML('afterbegin', component());
}

// 根据hash值获取当前路由  
function getRouteFromHash() {
    const route = window.location.hash.slice(1) || '/'; // 如果没有hash，默认为'/'  
    return routes[route] || NotFound;
}

// 路由初始化  
function initRouter() {
    renderPage(getRouteFromHash());
    window.addEventListener('hashchange', () => {
        renderPage(getRouteFromHash());
    });
}

// 页面加载时初始化路由  
initRouter();